<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>personcenter</title>
    <link rel="stylesheet" th:href="@{css/personcenter.css}">
</head>
<body>
<div class="banner">
    <ul>
        <li class="logo"><img src="image/controller_icon.png" alt=""></li>
        <li class="first"><a href="http://localhost:8080/bookfirst">首页</a></li>
        <li class="photo"><img src="image/person.png" alt=""></li>
    </ul>
</div>
<div class="personcentercon">
        <div  class="collectplace">
            <a href="#" class="content-item" th:each="collect:${collects}">
                <li th:data-id="${collect.bookId}"><img class="cover-box" th:src="${collect.cover}" /></li>
                <li  class="book-title" th:text="${collect.bookName}" ></li>
                <li class="book-author" th:text="${collect.author}"></li>
            </a>
            <button class="btn1">加载更多</button>
        </div>
</div>
<script type="text/javascript" th:src="@{jquery-3.5.0.min.js}"></script>
<script>
    $(".content-item").on('click',function () {
        var bookId=$(this).children('li').attr("data-id");
        console.log(bookId);
        $(".content-item").attr("href","http://localhost:8080/bookdetail?bookId="+bookId);
    });
</script>
</body>
</html>